<script setup lang="ts">
interface Props {
  text?: string
  show?: boolean
  position?: string
}
const props = withDefaults(
  defineProps<Props>(),
  {

  }
)
    
</script>
<template>
  <div class="relative">
    <slot />
    <div v-if="show" class="absolute p-2 rounded-lg bg-layer5 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] -top-2 z-10 -translate-y-full sm:w-[150%] sm:right-0">
      <span>{{ text }}</span>
      <div class="absolute -bottom-1.5 left-4 w-0 h-0 triangle-bottom-layer5 sm:!left-[35%]" />
    </div> 
  </div>  
</template>

<style>
:root {
    --layer5: 58 65 66;
}
</style>
<style scoped>
.bg-layer5 {
    background-color: rgb(var(--layer5) / 1);
}
.triangle-bottom-layer5 {
    border-left: 0.35rem solid transparent;
    border-right: 0.35rem solid transparent;
    border-top: 0.5rem solid rgb(var(--layer5));
}
</style>